<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="author" content="liaosimin">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>个人中心</title>
    <link rel="stylesheet" href="{{static_url('css/photo.css')}}"/>
    <link rel="stylesheet" href="{{static_url('css/iconfont.css')}}"/>
    <style>
        .head-box {
            width: 100%;
            height: 13em;
            padding-top: 5em;
            text-align: center;
            background: white;
            font-size: 1.5em;
        }

        .head-box img {
            border-radius: 50%;
            width: 30%;
            border: 4px solid #00D681;
            box-shadow: 0px 0px 3px #aaa;
        }

        .head-box p{
            margin: 2px 0;
        }

        .nickname{
            font-size: 1em;
        }
        .univ{
            color: gray;
            font-size: 0.8em;
        }

        /*.woman {*/
            /*color: #fdfffb !important;*/
            /*font-size: 1em !important;*/
            /*margin-left: 0.2rem;*/
            /*background-color: rgb(253, 128, 150);*/
        /*}*/
        .man{
            color: lawngreen;
            font-size: 1em !important;
            margin-right: 0.2rem;
        }
        .center-nav {
            float: left;
            width: 100%;
            padding-left: 0;
        }

        .center-nav div {
            float: left;
            width: 49.5%;
            padding: 2% 0;
            background: #ffffff;
            text-align: center;
            border-right: solid 1px;
            border-color: rgba(231, 232, 236, 1);
        }
        .photo-box{
            margin-top: 1em;
            padding: 2%;
            background-color: #ffffff;
            width: 96%;
            min-height: 2em;
            overflow: hidden;
        }
        .photo-box img{
            margin: 3px;
            width: 50px;
            height: 50px;
        }
        .info{
            margin-top: 1em;
            margin-bottom: 4em;
            padding: 0;
        }
        .info li{
            padding: 1em;
            background-color: #ffffff;
            list-style: none;
            border-bottom: 1px solid #ddd;
        }
        .info li span{
            color: gray;
            margin-right: 1em;
        }
        .follow{
            position: fixed;
            bottom: 0;
            font-size: 2em;
            height: 2em;
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
<header class="title-box2">
    <a href="{{reverse_url('Home')}}" class="return-btn"></a>
    <span class="title">个人中心</span>
</header>
<div class="head-box">
    <img src="http://7xit5j.com1.z0.glb.clouddn.com/default" id="avatar">

    <p><span class="nickname">风轻扬</span><i class="iconfont man">&#xe607</i></p>
    <p class="univ">华中科技大学 大三</p>
    <ul class="center-nav">
        <div>关注<span class="following"></span></div>
        <div>粉丝<span class="follower"></span></div>
    </ul>
</div>
<div class="photo-box">
</div>
<ul class="info">
</ul>
<button class="follow">加关注</button>

<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304"></script>
<script>
    Zepto(function ($) {
        $.get(location.pathname+'?page=1', function(res){
        if(res.success){append_items(res);}
        else{alert('error');}
    })
        $('.follow').on('click',function(){
            $.post(location.pathname,{},function(res){
                if(res.success){
                    $('.follow').attr('disabled',"true");
                    $('.follow').text('已关注');
                }
            });
        })
});

function append_items(data)
{
    $('#avatar').attr('src', data.avatar_url+'?imageView2/1/w/100/h/100');
    $('.nickname').text(data.nickname);
    $('.univ').text(data.univer_name+' '+data.grade_name);
    $('.following').text(data.following_sum);
    $('.follower').text(data.follower_sum);
    if(data.sex==2){
        $(".iconfont").remove();
        $('.nickname').append('<i class="iconfont woman">&#xe60a</i>');
//        $(".iconfont").addClass("woman");
//        $('.iconfont').text('&#xe612');
    }

    for(var i=0; i<data.photo_url.length; i++)
    {
        $('.photo-box').append('<img src="'+ data.photo_url[i]+'?imageView2/1/w/50/h/50'+'">');
    }
    $('.info').append('<li><span>身 高</span>'+data.height+' cm</li>');
    $('.info').append('<li><span>体 重</span>'+data.weight+' kg</li>');
    $('.info').append('<li><span>生 日</span>'+data.birthday+'</li>');
    $('.info').append('<li><span>介 绍</span>'+data.intro+'</li>');

    if(data.followed){
        $('.follow').attr('disabled',"true");
        $('.follow').text('已关注');
    }
}
</script>
</body>
</html>